@import '../../../style/var';

.exchange {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    left: 0;
    top: 0;
    height: 100%;
    background: #020203;
    .bg {
        width: 710px;
        height: 1086px;
    }
    .content {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .title {
        display: block;
        width: 321px;
        height: 385px;
        margin: 111px auto 72px;
    }
    .code-box {
        position: relative;
        margin: 0px auto;
        display: flex;
        align-items: center;
        width:579px;
        height:70px;
        padding: 8px 0 8px 18px;
        margin-top: 22px;
        background: #4F4F4F;
        .vip-code{
            width: 160px;
            font-size:28px;
            color:#CACACA;
            padding-right:10px;
            display: block;
            float: left;
            height: 25px;
            word-spacing:15px;
            border-right: 1px #d2d2d2 solid;
            margin-right: 10px;line-height:25px
        }
        .placehold{
            font-size:28px;
            color:#999999;
            letter-spacing:2px;
            font-family:PingFangSC-Regular;
            text-align: left;
        }
        
    }
    .code-box1{
        position: relative;
        margin: 0px auto;
        display: flex;
        align-items: center;
        width:579px;
        height:70px;
        padding: 8px 18px;
        background: #4F4F4F;
        margin-top: -30px;
        letter-spacing:2px;

        .vip-code{
            width: 160px;
            font-size:28px;
            color:#CACACA;
            letter-spacing: 6px;
            padding-right:10px;
            display: block;
            float: left;
            height: 25px;
            border-right: 1px #d2d2d2 solid;
            margin-right: 10px;
            line-height:25px
        }
        .placehold{
            font-size:28px;
            color:#999999;
            letter-spacing:2px;
            font-family:PingFangSC-Regular;
            text-align: left;
        }
    }
    .code-boxs{
        position: relative;
        margin: 0px auto;
        display: flex;
        align-items: center;
        width:579px;
    }
    .code {
        border: none;
        outline: none;
        width: 400px;
        height: 38px;
        line-height: 36px;
        display: block;
        float: left;
        color:#CACACA;
    }
    .codestyle{
        font-size: 34px;
    }
    .submit-btn {
        margin: 65rpx auto 0rpx;
        width:579px;
        text-align: center;
        line-height:70px;
        font-size:28px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color: #000000;
        background: #ffffff;
        &.active-btn {
            color:rgba(38,38,38,1);
            background:#fff;
        }
        font-weight: bold;
    }
    .tip {
        margin: 0px auto;
        padding: 24px;
        width:637px;
        height:304px;
        background:rgba(0,0,0, 0.8);
    }
    .tip-title {
        margin-bottom: 20px;
        font-size:28px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(211,211,211,1);
        line-height:40px;
        letter-spacing:3px;
    }
    .tip-content {
        font-size:26px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(153,153,153,1);
        letter-spacing:1px;
    }
    /*用户协议*/

.container-agreement{

    padding-bottom: 200rpx;

    font-size: 28rpx;
    color: #333333;

    line-height: 1.25rem;

}

.user-agree{
    background: #000000;
    color: #CBCCCC;
    border-bottom: 1px solid #AFAFB0;
    text-decoration:none
}
    .user-agrees{
        background: #000000;
        color: #979798;
        border-bottom: 1px solid #AFAFB0;
        text-decoration:none
    }
checkbox .wx-checkbox-input{
    background: #000000;
    border: 2px solid #CECECF;
    width: 46rpx; /* 背景的宽 */
    height: 46rpx; /* 背景的高 */
  }
  checkbox .wx-checkbox-input.wx-checkbox-input-checked{
    border: 2rpx solid #CECECF;
  }
 

.tips{

    width: 620rpx;

    margin: 50rpx auto 0 auto;

    padding: 20rpx;

    text-align: center;

    background: #f4f5f7;

    border-radius: 8rpx;

}

.tips view{

    margin-top: 5rpx;

}
.ordinaryDiv{
    position: relative;
    top:110px;
    width: 636px;
    height: 604px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    .widthFix{
        width: 636px;
        height: 604px;
    }
    .ordinary-title{
        position: absolute;
        top: 63px;
        left: 130px;
        font-size: 44px;
        font-family: Source Han Sans CN;
        font-weight: 600;
        color: #4B3C2D;
        line-height: 44px;
    }
    .ordinary-title1{
        position: absolute;
        top: 110px;
        left: 130px;
        font-size: 34px;
        font-family: Source Han Sans CN;
        font-weight: 600;
        color: #4B3C2D;
        line-height: 34px;
    }
    .ordinary-title2{
        position: absolute;
        top: 205px;
        left: 130px;
        font-size: 24px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #875940;
        line-height: 24px;
    }
    .ordinary-vip{
        width: 380px;
        display: flex;
        position: absolute;
        top: 250px;
        left: 130px;
        font-size: 24px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #78482F;
        line-height: 24px;
        justify-content: space-between;
    }
    .ordinary-vip1{
        width: 408px;
        display: flex;
        position: absolute;
        top: 338px;
        left: 115px;
        font-size: 24px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #78482F;
        line-height: 24px;
        justify-content: space-between;
    }
    .ordinary-img1{
        width: 70px;
        height: 70px;
    }
}
.imageDad{
    position: relative;
    top:115px;
    .imageDiv{
        width: 636px;
        margin: 0 auto;
        .widthFix{
            width: 636px;
            height: 604px;
        }
        .image-title{
            width: 380px;
            height: 42px;
            font-size: 44px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            position: absolute;
            left: 0;
            right: 0;
            top: -537px;
            bottom: 0;
            margin: auto;   
            color: #4B3C2D;
            line-height: 57px;
            z-index: 999;
        }
        .image-vip{
            width: 427px;
            height: 220px;
            position: absolute;
            left: 50%;
            top: 208px;   
            transform: translate(-50%, -50%);
            background-size: 427rpx;

        }
        .image-title2{
            font-size: 24px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #875940;
            position: absolute;
            width: 100%;
            text-align: center;
            top: 252px;   
        }
        .image-title3{
            font-size: 20px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #F4EBD7;
            position: absolute;
            left: 35px;
            top: 34px;   
            background-size: 427px;
        }
        .image-title4{
            font-size: 20px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #F4EBD7;
            position: absolute;
            left: 35px;
            top: 59px;   
            background-size: 427px;
        }
        .image-title5{
            display: flex;
            font-size: 20px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #F4EBD7;
            position: absolute;
            left: 35px;
            top: 167px;   
            background-size: 427px;
        }
        .image-title-child{
            font-size: 29px;
            color: #C2BAA7;
            line-height: 18px;
        }
        .image-title-child1{
            margin-left: 3px;
        }
    }
    
}
.rich-text{
    width:648px;
    margin: 0 auto;
    margin-top:50px;
    font-size: 25px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 43px;
}
.info{

    margin-top: 30rpx;

    height: 50rpx;
    line-height: 50rpx;

    text-align: center;

    font-size: 24rpx;

    color: #666;

}

 .topcode{
    color:#fff;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-size:100%;
    position: absolute;
    top:0;
    border-radius: 0px 0px 15px 15px;
    background: rgba(0,0,0,.6);

    .topcode-img{
        height: 960px;
        width: 100%;
    }
    }
    .know-dad{
        position: absolute;
        width:100%;
top: 0;
    }
.topsuccess{
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 999;
    padding-top: 179px;
    position:absolute;
    top:0;
    .imageDiv{
        width: 636px;
        height: 604px;
        margin: 0 auto;
        .widthFix{
            width: 636px;
            height: 604px;
        }
        .lefticon{
            position: relative;
            top:-508px;
            left: 161px;
            width: 30px;
            height: 28px;
        }
        .righticon{
            position: relative;
            top: -508px;
            left:422px;
            width: 30px;
            height: 28px;
        }
        .successtexts{
            position: relative;
            top: -563px;
            left:226px;
            font-size: 48px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #4B3C2D;
        }
        .rich-texts{
            position: relative;
            width: 350px;
            margin-top: 5px;
            text-align: center;
            top: -545px;
            left: 153px;
            font-size: 32px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #454545;
        }
    }
    .successtext{
        font-size: 58px;
        color: #fff;
        text-align: center;
    }
    .topimage-success{
        width: 132px;
        height: 132px;
        margin: 0 auto;
        display: block;
        margin-top: 98px;

    }
    .body-text-success{
        padding-top: 45px;
        width: 580px;
        height: 493px;
        margin: 0 auto;
        margin-top:49px;
        background: #FCF7EF;
        z-index: 20;
        border-radius: 10px;
        .successtext1{
            font-size: 28px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #595757;
            text-align: center;
        }
        .successtext2{
            margin-top: 67px;
            font-size: 22px;
            font-family: SourceHanSansCN-Medium;
            color: #808080;
            text-align: center;
        }
        .successtext3{
            font-size: 22px;
            font-family: SourceHanSansCN-Medium;
            color: #808080;
            text-align: center;
        }
        .success-images{
            position: relative;
            width: 427px;
            height: 220px;
            margin: 0 auto;
            display: block;
            margin-top: 36px;
            background-size: 427px;
            padding-left: 24px;
            padding-top: 34px;
            .success-title3{
            font-size: 20px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #F4EBD7;
            }
        }
        .success-title4{
            font-size: 20px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #F4EBD7;
        }
        .success-title5{
            position: absolute;
            bottom: 20px;
            left: 24px;
            display: flex;
            font-size: 20px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #F4EBD7;

        }
        .success-title-child{
            font-size: 29px;
            color: #F4EBD7;
            line-height: 18px;
        }
        .success-title-child1{
            margin-left: 3px;

        }
    }
}
.agreement-text{
    color:#fff;
    position: fixed;
    top: 0;
    left: 0;
    font-size: 25px;;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: rgba(0, 0, 0, .8);
}

 
.spanitem{
    width:638rpx;
    margin: 0 auto;
}
.btn-box{
    border-radius: 50%;
    width: 60rpx;
    height: 60rpx;
    margin: 0 auto;
    margin-top: 100rpx;
    text-align: center;
    line-height: 60rpx;
}
.close-btn{
    margin: 15rpx auto 100px;
    width:98px;
    text-align: center;
    line-height:90px;
    font-size:28px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color: #919292;
    font-weight: bold;
    border-bottom: 1px solid #747474;
}

 

.btn-size{

    margin: 30rpx 50rpx 0 50rpx;

}
.title1{
    height: 532px;
    width: 607px;
    margin-top: 194px;
    margin-left: 98px;
}
.know-box{
    text-align: center;
    width:638px;
    height: 70px;
    background: linear-gradient( #ECD1B1, #E4C28C);
    text-align: center;
    line-height: 70px;
    position:absolute;
    left: 0;
    right: 0;
    bottom: -138px;
    margin: auto;
    font-size:34px;
    font-family:PingFangSC-Regular;
    font-weight: bold;
}
}
